<template>
  <div class="login-bigBox">
    <el-row :gutter="24" type="flex" justify="center" align="middle" class="login-box">
      <el-col :span="8" class="col-box">
        <h1>登录</h1>
        <el-form :model="admin" :rules="rules" ref="admin" label-width="70px">
          <el-form-item label="账号" prop="username">
            <el-col :span="20">
              <el-input v-model="admin.username"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="密码" prop="password" >
            <el-col :span="20">
              <el-input v-model="admin.password" show-password type="password"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="验证码" prop="Verification">
            <el-col :span="12">
              <el-input v-model="admin.Verification" placeholder="内容区分大小写"></el-input>
            </el-col>
            <el-col :span="8">
              <s-identify :identifyCode="identifyCode"></s-identify>
            </el-col>
          </el-form-item>
          <br />
          <el-form-item>
            <el-button round @click="submitForm('admin')">立即登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import SIdentify from "../components/SIdentify.vue";

export default {
  components: { SIdentify },
  data() {
    return {
      identifyCode: "", //验证码接收数组
      identifyCodes: "0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ", //验证码产生随机数组

      admin: {
        username: "",
        password: "",
        Verification: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入账号名称", trigger: "blur" },
          {
            min: 5,
            max: 12,
            message: "长度在 5 到 12 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入账号密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        Verification: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            min: 4,
            max: 4,
            message: "长度为4 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.identifyCode == this.admin.Verification) {
            // 验证码成功
            this.$axios({
              method: 'post',
              url: '/admin/login',
              data: this.admin
            }).then((res) => {
              console.log(res)
              if (res.code === 0) {
                sessionStorage.setItem("uname", JSON.stringify(this.admin.username));
                this.$router.push('/home')
              }else if(res.code === 20006) {
                 this.$message({
                message: "账号密码错误",
                type: "warning",
            });
              }
            })
          } else if (this.admin.Verification == '') {
            this.$message({
              message: "验证码不能为空",
              type: "warning",
            });
            
            this.makeCode(this.identifyCodes, 4);
            this.identifyCode = "";
            this.admin.Verification = ''
          } else {
            this.$message.error("验证码错误");
            this.identifyCode = "";
            this.makeCode(this.identifyCodes, 4);
            this.admin.Verification = ''
          }
        } else {
          return false;
        }
      });
    },

    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },

    randomNum(min, max) {
      max = max + 1;
      return Math.floor(Math.random() * (max - min) + min);
    },
    // 随机生成验证码字符串
    makeCode(data, len) {
      for (let i = 0; i < len; i++) {
        this.identifyCode += data[this.randomNum(0, data.length - 1)];
      }
    },
  },

  created() {
    this.refreshCode();
  },
};
</script>

<style scoped>


.login-bigBox{
  background: #55B1FD;
}
.login-box {
  width: 100vw ;
  height: 100vh ;

}

.col-box {
  background-color: #fff;
  padding: 20px;
  line-height: 20px;
  border: 1px solid rgb(121, 114, 114);
  box-shadow: 2px 2px 3px #555dfd;
  border-radius: 30px;
}

h1 {
  display: block;
  width: 100%;
  height: 80px;
  margin-bottom: 20px;
  line-height: 80px;
  color: #b1fd55;
  background:url(../../public/img/login/loginBackground.png);
  background-repeat: no-repeat;
  background-position:100% 50%;
  text-align: center;
  border-radius: 5px;
}

/* .el-textarea__inner,
.el-input__inner {
  background: transparent;
  border: none;
  border-bottom: 1px solid white;
  color:white;
  font-size: 1.8rem;
} */
</style>